<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>会员中心-登陆</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/common.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/layui/lay/modules/layer.js"></script>
</head>
<body>
<div class="top_hw clearfix">
    <div class="top_h clearfix">
        <div class="top_hl"><span>欢迎来到中国梦想游，让你的梦想全程免费自由行！</span> 预定热线：<b>0571-63322269</b></div>
        <div class="top_hr"><a th:href="@{/register}">会员注册</a>  |  <a th:href="@{/goLogin}">登录</a>
        </div>
    </div>
    <div class="head_w">
        <div class="head_t clearfix">
            <div class="logo"><img src="images/logo.jpg"/></div>
            <div class="rx_line"><img src="images/rx.jpg"/></div>
        </div>
    </div>
    <div class="mainNav clearfix">
        <ul class="Nav_ul">
            <li  class="cur"><a th:href="@{/index}">首页</a><img src="images/nav_line.jpg"/></li>
            <li><a th:href="@{/travelRoute}">旅游路线</a><img src="images/nav_line.jpg"/></li>
            <li><a th:href="@{/travelSpot}">旅游景点</a><img src="images/nav_line.jpg"/></li>
            <li><a th:href="@{/hotelAccommodation}">餐饮住宿</a><img src="images/nav_line.jpg"/></li>
            <li ><a th:href="@{/car}">旅游车票</a><img src="images/nav_line.jpg"/></li>
            <li ><a th:href="@{/insurance}">旅游保险</a><img src="images/nav_line.jpg"/></li>
            <li ><a th:href="@{/strategy}">旅游攻略</a><img src="images/nav_line.jpg"/></li>
            <li><a th:href="@{/attention}">注意事项</a><img src="images/nav_line.jpg"/></li>
            <li th:if="${session.userName!=null}"><a th:href="@{/userCenter}">会员中心</a><img src="images/nav_line.jpg"/></li>
        </ul>
    </div>

    <div class="b_wrap">
        <div class="current"><span>当前所在地：</span><a th:href="@{/index}">首页</a>  >> <a th:href="@{/goLogin}">会员登录</a></div>
        <div class="login_w clearfix">
            <form class="layui-form" method="post" action="/userPhoneLoging">
                <div class="login">
                    <div class="login_t">会员登录</div>
                    <div class="login_con">
                        <table class="login_tab" width="380" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <label>手机号</label>
                                    <input type="text" placeholder="请输入手机号" autocomplete="off" id="memPhone" name="memPhone" style="width: 35%;display: inline">
                                    <input type="button" value="获取验证码" id="sendBtn" style="width:25%;margin-left: 5px;border-color:#1e9fff !important;" onclick="sendCode(this)"></input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>验证码</label>
                                    <input type="text" placeholder="请输入验证码" autocomplete="off" id="code" name="code" maxlength="6" style="width: 35%;display: inline">
                                </td>
                            </tr>
                            <tr>
                                <td><button class="log_b" style="margin-left: 20%" type="submit">登 录</button></td>
                            </tr>
                        </table>
                    </div>
                    <div class="login_b">
                        <div th:text="${message}" style="color: red;align-content: center"></div>
                        <a th:href="@{/goLogin}">密码登录</a>&nbsp;|&nbsp;<a th:href="@{/goPhoneLogin}">短信登录</a>
                        <p>还不是梦想游会员？  <a class="free_zc" th:href="@{/register}">免费注册</a> </p>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    function sendCode(){
        var memPhone = $("#memPhone").val();
        console.log(memPhone.length);
        if(memPhone == '' || memPhone.length != 11){
            window.alert("请输入正确的手机号！");
            return;
        }else{
            $.ajax({
                type: 'GET',
                url: 'http://121.41.130.112:9999/fitness/code',
                data: {
                    memPhone : memPhone
                },
                dataType: 'json',
                success: function(data) {
                    if(data){
                        timer();
                    }else{
                        window.alert("获取验证码失败");
                    }
                },
                error: function(data) {
                    window.alert('连接超时！');
                },
            });
        }
    }
    var wait = 60;
    //倒计时
    function timer() {
        if(wait == 0){
            $("#sendBtn").val("获取验证码");
            $("#sendBtn").removeAttr("disabled");
            $("#sendBtn").css("border-color","1e9fff").css("background", "#ffffff").css("cursor", "pointer");
            wait = 60;
        }else{
            $("#sendBtn").attr("disabled","true");
            $("#sendBtn").css("border-color","fbfbfb").css("background", "#ccc").css("cursor", "not-allowed");
            $("#sendBtn").val(wait + "秒后重发");
            wait--;
            setTimeout(function() {timer()}, 1000);
        }
    }
</script>
</body>
</html>
